<template>
	<view class="content">
		<view class="me-top">
			<image src="/static/img/bg.png" mode="" class="top-img"></image>
			<view class="me-info-con row" @tap="navTo('/pages/public/userInfo', {login: true})">
				<view class="user-icon"><u-avatar :src="userInfo.icon" size="102"></u-avatar></view>
				<view class="fill" style="margin-left:30upx;">
					<view class=" row">
						<text class="uesr-name" style="margin-right: 20upx;">{{ userInfo.nickName ? userInfo.nickName : "点击登录" }}</text>
						<u-icon name="arrow-right" color="#ffffff" size="24"></u-icon>
					</view>
					<view class="uesr-phone" style="padding-top: 10upx;">{{ userInfo.phone | phone}}</view>
				</view>
			</view>
		</view>
		<view class="user-bot">
			<image src="/static/img/bgh.png" mode="" class="middle-img"></image>
			<view class="user-bot-info row  between">
				<view class="column center fill">
					<view class="qi-tit">我的钱包</view>
					<view class="qi-num" style="margin-top:20upx ;">{{ userInfo.balance }}</view>
				</view>
				<view class="column center fill">
					<view class="qi-tit">待到账</view>
					<view class="qi-num" style="margin-top:20upx ;">{{ whenABillIs }}</view>
				</view>
				<view class="column center fill">
					<view class="row" @tap="navTo('/pages/public/zhangdan', {login: true})">
						<view class="qi-zan">查看账单</view>
						<u-icon name="arrow-right" size="20" color="#704D20"></u-icon>
					</view>
					<view class="qi-btn" hover-class="hover-opacity" style="margin-top:20upx ;" @tap="userCanGet">申请提现</view>
				</view>
			</view>
		</view>

		<view class="orde-con" style="width: 100%;">
			<u-section
				title="我的订单"
				fontSize="32"
				sub-title="查看全部"
				:show-line="false"
				@click="navTo(`/pages/order/list?type=0`, {login: true})"
			></u-section>
		</view>
		<scroll-view scroll-x="true" >
			<view class="" style="width:960upx;">
				<u-grid :col="7" :border="false">
					<u-grid-item v-for="(v, k) in navList" :key="k" @tap="navTo(`/pages/order/list?type=${k+1}`, {login: true})">
						<image :src="v.icon" class="row-nav-item-icon"></image>
						<text class="row-nav-item-text clamp">{{ v.name }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			
		</scroll-view>
		
		<view class="me-cell">
			<u-cell-group :border="false">
				<u-cell-item
					icon="/static/img/shouhuodizhi.png"
					title="我的地址"
					@click="navTo('/pages/address/myAddress?source=0', {login: true})"
				></u-cell-item>
				<u-cell-item icon="/static/img/bangzhu.png" title="帮助说明" @click="navTo('/pages/public/help')"></u-cell-item>
				<u-cell-item
					icon="/static/img/guanyuwomen.png"
					title="关于我们"
					@click="navTo('/pages/public/aboutwe?type=1')"
				></u-cell-item>

				<u-cell-item
					icon="/static/img/yijianfankui.png"
					title="意见反馈"
					@click="navTo('/pages/public/finker', {login: true})"
				></u-cell-item>
				<u-cell-item
					:border-bottom="false"
					icon="/static/img/wodeshoucang.png"
					title="我的收藏"
					@click="navTo('/pages/public/mystore', {login: true})"
				></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: "我的",
			whenABillIs: "0",
			tabbar: "",
			uid: "",
			userInfo: {balance:0},
			navList: [
				{icon: "/static/img/daifukuan.png", name: "待付款"},
				{icon: "/static/img/yifukuan.png", name: "已付款"},
				{icon: "/static/img/daifahuo.png", name: "待发货"},
				{icon: "/static/img/daishouhuo.png", name: "待收货"},
				{icon: "/static/img/weituo.png", name: "委托代售"},
				{icon: "/static/img/yiwancheng.png", name: "已完成"},
				{icon: "/static/img/tuikuan.png", name: "退款/售后"}
			]
		};
	},
	onShow() {
		if (uni.getStorageSync("uid")) {
			this.initData();
		}
	},
	methods: {
		initData() {
			this.getUserInfo();
			this.getABillIs();
		},
		userCanGet(){
			if(!uni.getStorageSync('uid')){
				this.navTo("/pages/public/author");
				return
			}
			if(this.userInfo.balance<1){
				this.$util.msg('当前金额大于1元才可提现,加油哦~');
				return
			}
			this.navTo(`/pages/public/withdrawal?type=0&money=${this.userInfo.balance}`, {login: true});
		},
		async getUserInfo() {
			const res = await this.$request("user/info", {uid: uni.getStorageSync("uid")});
			console.log(res);
			if (res.result == 0) {
				this.userInfo = res.data;
				getApp().globalData.userInfo=res.data;
			}else{
				this.$util.msg(res.resultNote)
			}
		},
		async getABillIs() {
			const res = await this.$request("user/not-receive", {uid: uni.getStorageSync("uid")});
			console.log(res);
			if (res.result == 0) {
				if(res.data &&res.data.money){
					this.whenABillIs = res.data.money;
				}
			}else{
				this.$util.msg(res.resultNote)
			}
		}
	}
};
</script>

<style lang="scss">
.qi-tit {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #56320f;
	line-height: 22upx;
}
.qi-zan {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #704d20;
	line-height: 22upx;
}
.qi-num {
	font-size: 54upx;
	font-family: DIN;
	font-weight: bold;
	color: #43260a;
	line-height: 40upx;
	min-height: 40upx;
}
.qi-btn {
	width: 169upx;
	height: 53upx;
	line-height: 53upx;
	text-align: center;
	background: #a7834a;
	border-radius: 27upx;
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.u-section__title__text {
	font-size: 32upx;
}
.orde-con {
	padding: 30upx;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.me-top,
.top-img {
	width: 750upx;
	height: 430upx;
	position: relative;
}
.top-img {
	z-index: -1;
}
.middle-img {
	width: 708upx;
	height: 179upx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.me-info-con {
	position: absolute;
	top: calc(var(--status-bar-height) + 100upx);
	padding: 0 30upx;
	width: 100%;
	box-sizing: border-box;
}
.uesr-name {
	font-size: 36upx;
	font-weight: bold;
	color: #ffffff;
}
.uesr-phone {
	font-size: 22upx;
	font-weight: 500;
	color: #e4f9ff;
}
.user-icon image {
	width: 102upx;
	height: 102upx;
	border-radius: 50%;
	border: 2px solid #99130c;
}
.user-bot {
	width: calc(100% - 60upx);
	height: 179upx;
	margin-top: -100upx;
	position: relative;
}
.user-bot-info {
	width: 100%;
	height: 179upx;
	padding: 40upx 50upx;
	color: #ffffff;
}
.item-con {
	height: 123upx;
	justify-content: center;
	align-items: center;
}
.item-title {
	font-size: 24upx;
	font-weight: 500;
	color: #fdeed5;
}
.item-num {
	font-size: 32upx;
	font-family: DIN;
	font-weight: 500;
	color: #feefb7;
}
.me-cell {
	width: 100%;
}
.row-nav-item-icon {
	width: 42upx;
	height: 42upx;
}
.row-nav-item-text {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 36upx;
	padding: 10upx 0;
	max-width: 130upx;
}
</style>
